<route lang="json5">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '个人中心',
	},
}
</route>
<template>
	<view class="page-my">
		<fly-navbar backgroundColor="transparent" leftText="个人中心" fixed />
		<image class="w-full h-[100vh] fixed top-0 left-0 z-1" :src="baseImg + '/my/my-bg.jpg'"></image>
		<view
			class="w-full h-[100vh] absolute top-0 left-0 z-2 box-border"
			:style="{ paddingTop: barAlbright + 'rpx' }"
		>
			<scroll-view scroll-y class="h-full">
				<view v-if="userInfo.student_id && thisPage === 1" style="padding-bottom: 220rpx;">
					<view class="px-4 w-full box-border mt-4">
						<view class="w-full px-4 box-border py-4 rounded-[30rpx] bg-white user-item">
							<view class="w-full flex justify-between items-center">
								<view
									class="flex justify-between items-center pr-[20rpx] box-border"
									style="width: calc(100% - 100rpx)"
								>
									<image
										class="w-[105rpx] h-[105rpx] rounded-[50%] mr-1"
										:src="myInfo.avatar || baseImg + '/user-default.png'"
									></image>
									<view class="flex flex-col flex-1 items" style="width: calc(100% - 110rpx)">
										<text class="text-[#303030] text-[29rpx]">{{ myInfo.username }}</text>
										<view class="mt-2">
											<text class="text-[#919191] text-[25rpx]">{{ myInfo.school_name }}</text>
											<text class="text-[#919191] text-[25rpx] ml-1">{{ myInfo.class_name }}</text>
										</view>
									</view>
								</view>
								<view class="flex flex-col justify-between">
									<text class="text-[#3B3B3B] text-[25rpx]">阅读积分</text>
									<view
										class="mt-1 rounded-[18rpx] h-[36rpx] flex justify-center items-center px-2 text-[25rpx] text-[#34A4E2] user-point"
										>{{ myInfo.integral_number || 0 }}</view
									>
								</view>
							</view>
							<view class="w-full grid grid-cols-3 gap-x-2 mt-5">
								<view
									class="px-2 py-2 rounded-[25rpx] record-item"
									@tap="linkUrl('/pages-user/reading-record/index')"
								>
									<view class="flex items-center justify-center">
										<image
											class="w-[38rpx] h-[38rpx] rounded-[50%]"
											:src="baseImg + '/my/my-book.png'"
										></image>
										<text class="text-[#303030] text-[26rpx] ml-1">阅读记录</text>
									</view>
									<view class="mt-2 flex items-center px-1 justify-center">
										<text class="text-[#919191] text-[24rpx]">在读图书</text>
										<text
											class="text--[#303030] text-[47rpx] font-bold ml-2"
											style="line-height: 1"
											>{{ myInfo.read_book_count || 0 }}</text
										>
									</view>
								</view>
								<view
									class="px-2 py-2 rounded-[25rpx] record-item"
									@tap="linkUrl('/pages-user/together-record/index')"
								>
									<view class="flex items-center justify-center">
										<image
											class="w-[38rpx] h-[38rpx] rounded-[50%]"
											:src="baseImg + '/my/my-read.png'"
										></image>
										<text class="text-[#303030] text-[26rpx] ml-1">共读记录</text>
									</view>
									<view class="mt-2 flex items-center px-1 justify-center">
										<text class="text-[#919191] text-[24rpx]">参与计划</text>
										<text
											class="text--[#303030] text-[47rpx] font-bold ml-2"
											style="line-height: 1"
											>{{ myInfo.plan_count || 0 }}</text
										>
									</view>
								</view>
								<view
									class="px-2 py-2 rounded-[25rpx] record-item"
									@tap="linkUrl('/pages-user/practice-record/index')"
								>
									<view class="flex items-center justify-center">
										<image
											class="w-[38rpx] h-[38rpx] rounded-[50%]"
											:src="baseImg + '/my/my-test.png'"
										></image>
										<text class="text-[#303030] text-[26rpx] ml-1">测练记录</text>
									</view>
									<view class="mt-2 flex items-center px-1 justify-center">
										<text class="text-[#919191] text-[24rpx]">本周测练</text>
										<text
											class="text--[#303030] text-[47rpx] font-bold ml-2"
											style="line-height: 1"
											>{{ myInfo.exam_count || 0 }}</text
										>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="px-4 w-full box-border mt-4">
						<view class="w-full px-4 box-border py-5 rounded-[30rpx] bg-white user-item">
							<view
								class="w-full flex justify-between items-center"
								@tap="linkUrl('/pages-user/personal/index')"
							>
								<view class="flex items-center">
									<image class="w-[38rpx] h-[38rpx]" :src="baseImg + '/my/my-info.png'"></image>
									<text class="ml-3 text-[29rpx] text-[#303030] font-bold">个人资料</text>
								</view>
								<view class="items-link">
									<image class="w-[50rpx] h-[50rpx]" :src="baseImg + '/my/my-link.png'"></image>
								</view>
							</view>
							<view
								class="w-full flex justify-between items-center mt-5"
								@tap="linkUrl('/pages-user/account/index?type=back')"
							>
								<view class="flex items-center">
									<image class="w-[38rpx] h-[38rpx]" :src="baseImg + '/my/my-change.png'"></image>
									<text class="ml-3 text-[29rpx] text-[#303030] font-bold">切换学生</text>
								</view>
								<view class="items-link">
									<image class="w-[50rpx] h-[50rpx]" :src="baseImg + '/my/my-link.png'"></image>
								</view>
							</view>
							<view
								class="w-full flex justify-between items-center mt-5"
								@tap="linkUrl('/pages/class/roster/index')"
								v-if="userInfo.class_id"
							>
								<view class="flex items-center">
									<image class="w-[38rpx] h-[38rpx]" :src="baseImg + '/my/my-student.png'"></image>
									<text class="ml-3 text-[29rpx] text-[#303030] font-bold">班级成员</text>
								</view>
								<view class="items-link">
									<image class="w-[50rpx] h-[50rpx]" :src="baseImg + '/my/my-link.png'"></image>
								</view>
							</view>
							<view
								class="w-full flex justify-between items-center mt-5"
								@tap="linkUrl('/pages-user/bookrack/index')"
							>
								<view class="flex items-center">
									<image class="w-[38rpx] h-[38rpx]" :src="baseImg + '/my/my-bookrack.png'"></image>
									<text class="ml-3 text-[29rpx] text-[#303030] font-bold">我的书架</text>
								</view>
								<view class="items-link">
									<image class="w-[50rpx] h-[50rpx]" :src="baseImg + '/my/my-link.png'"></image>
								</view>
							</view>
							<view class="w-full flex justify-between items-center mt-5" @tap="callPhone">
								<view class="flex items-center">
									<image class="w-[38rpx] h-[38rpx]" :src="baseImg + '/my/my-service.png'"></image>
									<text class="ml-3 text-[29rpx] text-[#303030] font-bold">联系客服</text>
									<text class="ml-2 text-[22rpx] text-[#919191]">（工作日8:30-17:00）</text>
								</view>
								<view class="items-link">
									<image class="w-[50rpx] h-[50rpx]" :src="baseImg + '/my/my-link.png'"></image>
								</view>
							</view>
						</view>
						<view class="w-full justify-center items-center flex mt-8 box-border">
							<view class="w-[430rpx] relative h-[105rpx]">
								<image
									class="w-full h-full absolute left-[50%] -translate-x-[50%] top-0 z-1"
									:src="baseImg + '/my/personal-success.png'"
								></image>
								<view
									@tap="logout"
									class="w-full h-full flex justify-center items-center absolute text-[#F4F7F4] text-[32rpx] left-[50%] -translate-x-[50%] top-0 z-2"
									>退出登录</view
								>
							</view>
						</view>
					</view>
				</view>
				<block v-else>
					<view class="w-full h-full px-4 py-4 box-border" v-if="!userInfo.student_id">
						<view
							class="w-full h-full px-4 box-border py-5 rounded-[30rpx] bg-white flex justify-center items-center flex-col"
						>
							<image
								:src="baseImg + '/class/class-login.png'"
								class="w-[352rpx] h-[317rpx]"
							></image>
							<view class="w-full flex justify-center items-center flex-col mt-8">
								<text class="text-[#474747] text-[32rpx]">还没有加入班级</text>
								<view
									@tap="toLogin"
									class="mt-4 w-[392rpx] rounded-[50rpx] h-[101rpx] flex justify-center items-center text-[#fff] text-[32rpx] my-login-btn"
									>去加入班级</view
								>
							</view>
						</view>
					</view>
					<no-page v-if="thisPage === 0" @click="retry" type="btn"></no-page>
				</block>
			</scroll-view>
		</view>
		<tab-bar current='5'></tab-bar>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { systemInfo } from '@/utils/getSystemInfo';
import { useUserStore } from '@/store';
import { getMyCenterInfo, userLogout } from '@/service/user';
import { toAuthPage } from '@/utils/jump';
import useChangeTabbar from '@/hooks/useChangeTabbar';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const myInfo = ref(null);
const thisPage = ref(-1);

// useChangeTabbar(3);

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	if (userInfo.value.student_id) {
		getMyInfo();
	}
});

const getMyInfo = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getMyCenterInfo({ student_id: userInfo.value.student_id });
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			myInfo.value = { ...res.data };
		} else {
			thisPage.value = 0;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
	}
};

const logout = () => {
	uni.showModal({
		title: '提示',
		content: '是否退出当前账号?',
		async success(res) {
			if (res.confirm) {
				uni.showLoading({
					title: '退出中...',
				});
				try {
					const res = await userLogout();
					uni.hideLoading();
					if (res.status_code === 200) {
						uni.clearStorageSync();
						userStore.reset();
						uni.setStorageSync('isLogout', true);
						uni.showToast({
							icon: 'none',
							title: '退出成功',
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message,
						});
					}
				} catch (error) {
					uni.showToast({
						icon: 'none',
						title: '退出失败',
					});
				}
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		},
	});
};

const retry = () => {
	getMyInfo();
};

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};

const toLogin = () => {
	// 跳转登录是否 验证授权
	toAuthPage();
};

const callPhone = () => {
	uni.makePhoneCall({
		phoneNumber: '027-59311607',
	});
};
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.page-my {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;

	.user-item {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}

	.user-point {
		background: #f3f3f5;
	}

	.record-item {
		background: #f3f3f3;
	}

	.my-login-btn {
		background: #f4c421;
	}
}
</style>
